<template>
  <div class="contract-expiry-bar">
    <EChart
      :option="barOption"
      :width="width"
      :height="height"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import EChart from '@/components/EChart.vue'
import * as echarts from 'echarts'


const props = defineProps({
  // 数据数组，每个元素包含 name 和 value
  data: {
    type: Array,
    default: () => [
      { name: '0-10天', value: 42 },
      { name: '11-20天', value: 38 },
      { name: '21-30天', value: 40 },
      { name: '31-40天', value: 35 },
      { name: '41-50天', value: 32 },
      { name: '51-60天', value: 28 },
      { name: '61-70天', value: 25 }
    ]
  },
  // 容器尺寸
  width: {
    type: Number,
    default: 500
  },
  height: {
    type: Number,
    default: 400
  }
})

// 计算柱形图配置
const barOption = computed(() => {
  return {
    title: {
      text: '合同到期预警',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#e6ff00'
      },
      left: 'center',
      top: 10
    },

    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(24, 144, 255, 0.3)',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff',
        fontSize: 14
      },
      formatter: function(params) {
        return `
          <div style="padding: 8px;">
            <div style="color: ${params.color}; font-weight: bold; margin-bottom: 4px;">
              ${params.name}
            </div>
            <div>合同数量: ${params.value}个</div>
          </div>
        `
      }
    },

    grid: {
      left: '15%',
      right: '8%',
      top: '25%',
      bottom: '0'
    },

    xAxis: {
      type: 'category',
      data: props.data.map(item => item.name),
      axisLabel: {
        fontSize: 14,
        color: '#bfbfbf',
        interval: 0, // 强制显示所有标签
        rotate: 0,   // 不旋转标签
        margin: 10
      },
      axisLine: {
        lineStyle: {
          color: '#404040'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },

    yAxis: {
      type: 'value',
      name: '合同数量(个)',
      nameTextStyle: {
        fontSize: 14,
        color: '#bfbfbf',
        padding: [0, 0, 0, 10]
      },
      axisLabel: {
        fontSize: 14,
        color: '#bfbfbf'
      },
      axisLine: {
        lineStyle: {
          color: '#404040'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      max: function(value) {
        return Math.ceil(value.max / 10) * 10 + 5; // 上取整到10的倍数再加5
      }
    },

    series: [{
      type: 'bar',
      data: props.data.map((item, index) => ({
        value: item.value,
        name: item.name,
        itemStyle: {
          color: getBarColor(index, item.value)
        }
      })),
      label: {
        show: true,
        position: 'top',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#ffffff',
        formatter: '{c}'
      },
      barWidth: '40%', // 柱子宽度
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return idx * 100
      }
    }]
  }
})

// 根据索引和值获取柱子颜色
const getBarColor = (index, value) => {
  const colors = [
    '#ff4d4f',  // 红色 - 0-10天
    '#fa8c16',  // 橙色 - 11-20天
    '#faad14',  // 黄色 - 21-30天
    '#ffc53d',  // 浅黄 - 31-40天
    '#faad14',  // 黄色 - 41-50天
    '#73d13d',  // 绿色 - 51-60天
    '#52c41a'   // 深绿 - 61-70天
  ]

  return colors[index % colors.length]
}
</script>

<style scoped>
.contract-expiry-bar {
  width: 100%;
  height: 100%;
}
</style>
